<template>
    <div class="footer-wrap">
        <div class="footer-container clearfix">
            <div class="left-container">
            </div>
            <div class="center-container">
                <div class="title">{{ $t('foot.links') }}</div>
                <div class="item">
                    <a href="https://www.eastmoney.com/" target="_blank">东方财富</a>
                </div>
                <div class="item">
                    <a href="" target="_blank">同花顺</a>
                </div>
                <div class="item">
                    <a href="" target="_blank">慧博研报</a>
                </div>
            </div>
            <div class="right-container">
                <div class="title">{{ $t('foot.aboutUS') }}</div>
                <div class="item">
                    本网站数据来自东方财富，仅供学习使用
                    <!-- <a href="https://twitter.com/allsportschain" target="_blank"><b class="twitter-icon"></b>{{ $t('foot.twitter') }}</a> -->
                </div>
            </div>
        </div>
        <div class="copy-right">
            <a href="http://beian.miit.gov.cn" target="_blank">
                <span >京ICP备16006042号-2 </span>
            </a>
            @Copyright 2020
        </div>
    </div>
</template>

<script>
import '../../static/style/base.less';

export default {
    name: 'headTemp',
    data () {
        return {};
    },
    mounted () {

    },
    methods: {}
};
</script>

<style scoped lang="less">
    .footer-wrap {
        width: 100%;
        color: #000;
        background: #272727;
        margin-top: 80px;
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            padding: 30px 0 20px 0;
            .left-container {
                float: left;
                width: 40%;
                padding-left: 50px;
                img {
                    display: block;
                    height: 60px;
                    cursor: pointer;
                }
                .text {
                    font-size: 12px;
                    color: #C0C0C0;
                    width: 60%;
                    line-height: 20px;
                    margin-top: 15px;
                }
            }
            .center-container,
            .right-container {
                float: left;
                width: 30%;
                padding-top: 10px;
                .title {
                    width: 80%;
                    color: #eee;
                    font-size: 18px;
                    font-weight: 200;
                    border-bottom: 1px dotted #eee;
                    height: 32px;
                    margin-bottom: 10px;
                }
            }
            .center-container {
                .item {
                    height: 40px;
                    line-height: 40px;
                    a {
                        display: block;
                        height: 40px;
                        line-height: 40px;
                        font-size: 15px;
                        color: #C0C0C0;
                        &:hover {
                            color: #3498E6;
                        }
                    }
                }
            }
            .right-container {
                .item {
                    height: 40px;
                    line-height: 40px;
                    a {
                        display: block;
                        height: 40px;
                        line-height: 40px;
                        font-size: 15px;
                        color: #C0C0C0;
                        &:hover {
                            color: #3498E6;
                        }
                    }
                }
            }
        }
        .copy-right {
            background-color: #222;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #C0C0C0;
        }
    }
</style>
